<template>
  <el-form :model="formData" label-width="auto" ref="formRef" size="large">
   

    <el-form-item label="事件状态" prop="zrdw">
      <el-select v-model="formData.zrdw" placeholder="请选择"> </el-select>
    </el-form-item>
     <el-form-item label="事件名称" prop="name">
      <el-input v-model="formData.name" placeholder="请输入"></el-input>
    </el-form-item>
     <el-form-item label="事件地址" prop="name">
      <el-input v-model="formData.name" placeholder="请输入"></el-input>
    </el-form-item>
    <el-form-item label="事件时间" prop="type">
      <el-select v-model="formData.type" placeholder="请选择"> </el-select>
    </el-form-item> 

    <el-form-item label="事件类别" prop="type">
      <el-select v-model="formData.type" placeholder="请选择"> </el-select>
    </el-form-item>

    <el-form-item label="事件等级" prop="jsdw">
      <el-select v-model="formData.jsdw" placeholder="请选择"> </el-select>
    </el-form-item>
 <el-form-item label="区域负责人" prop="name">
      <el-input v-model="formData.name" placeholder="请输入"></el-input>
    </el-form-item>
  <el-form-item label="负责联系人" prop="name">
      <el-input v-model="formData.name" placeholder="请输入"></el-input>
    </el-form-item>
     <el-form-item label="上报单位" prop="type">
      <el-select v-model="formData.type" placeholder="请选择"> </el-select>
    </el-form-item>
     <el-form-item label="上报时间" prop="name">
      <el-input v-model="formData.name" placeholder="请输入"></el-input>
    </el-form-item>
     <el-form-item label="上报人" prop="type">
      <el-select v-model="formData.type" placeholder="请选择"> </el-select>
    </el-form-item>
    <el-form-item label="事件描述" prop="xmlr">
      <el-input
        v-model="formData.xmlr"
        type="textarea"
        placeholder="请输入"
      ></el-input>
    </el-form-item>

    <el-form-item label="事件图片" prop="wcsj">
      <el-upload
        class="upload-demo"
        drag
        action=""
        multiple
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
            <p>上传文件</p>
        </div>
      </el-upload>
    </el-form-item>

    <el-form-item>
      <el-col :span="24" style="text-align: right">
        <el-button size="large"  class="cancel" @click="confirm">取消</el-button>

        <el-button size="large" class="save" type="primary" @click="confirm">保存</el-button>
      </el-col>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import Mitt from "@/utils/mitt";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
const formData = reactive({
  name: "",
  type: "",
  zrdw: "",
  jsdw: "",
  xmlr: "",
  wcsj: "",
  jd: "",
  wd: "",
});

const formRef = ref<FormInstance>();

function resetForm() {
  formRef.value.resetFields();
}

function confirm() {
  Mitt.emit("close-dialog");
}
</script>

<style lang="less" scoped>
/deep/
.el-upload-dragger{
  padding: inherit;
  border: 1px dashed #4FB9CF;
  background-color: inherit;
  padding: 10px 20px;
}
/deep/
.el-upload__text{
    line-height: 26px;
    font-size: 20px;
    color: white;
}
/deep/
.el-upload__tip{
    font-size: 18px;
    color: white;
    line-height: 20px;
    margin-top: 3px;
}
/deep/
.el-textarea__inner{
    color: #daf5fa !important;
    background: transparent !important;
        font-size: 20px;
    background: rgba(48, 82, 95, 0.62) !important;
    box-shadow: 0 0 0 1px #4FB9CF inset !important;
}
.cancel{
    color: #1BFBFA;
    background: rgba(27,251,250,0.19);
    border: 1px solid #1BFBFA;
}
.save{
    color: #091C25;
    background: #1BFBFA;
}
</style>
